<template>
  <div class="nav navbar-light bg-light">
    <a class="navbar-brand" href="" style="font-family: fangsong;">
      <img src="../../../public/image/logo.png" width="32" height="32" class="nav-logo-img"
           alt="百川" title="百川">百川</a>
    <ul class="justify-content-end">
      <li class="nav-item">
        <a>{{nowTime}}</a>
      </li>
      <li class="nav-item">
        <a style="margin-top: -16px; display: inline-block;margin-right: 50px">
          <iframe allowtransparency="true"
                  frameborder="0"
                  width="180"
                  height="33"
                  scrolling="no"
                  src="//tianqi.2345.com/plugin/widget/index.htm?s=3&amp;z=2&amp;t=0&amp;v=0&amp;d=1&amp;bd=0&amp;k=400000&amp;f=ffffff&amp;ltf=009944&amp;htf=cc0000&amp;q=1&amp;e=1&amp;a=1&amp;c=54511&amp;w=180&amp;h=33&amp;align=center">
          </iframe>
        </a>
      </li>
<!--      <li class="nav-item"><a>一言</a></li>
      <li class="nav-item"><a>任意门</a></li>
      <li class="nav-item"><a></a></li>-->

      <li class="nav-item"><a></a></li>
      <li class="nav-item"><a></a></li>
      <li class="nav-item"><a></a></li>
      <li class="nav-item"><a></a></li>
      <li class="nav-item"><a></a></li>
    </ul>
    <div id="rect_shape_U6lcQo5nxA" style="position: absolute; left: 0px; top: 0px; width: 129.6px; height: 129.6px; transform: translate(79.2px, 43.2px) rotate(0deg); transform-origin: 64.8px 64.8px; cursor: move;"></div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data(){
    return{
      nowTime:null
    }
  },
  created() {
    this.nowTime=this.showtime();
    setInterval(() => {
      this.nowTime=this.showtime();
    },1000)

  },
  methods:{
    showtime(){
      var checkTime = function (i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }
      var nowdate = new Date();
      var year = nowdate.getFullYear(),
        month = nowdate.getMonth() + 1,
        date = nowdate.getDate(),
        day = nowdate.getDay(),
        week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        h = nowdate.getHours(),
        m = nowdate.getMinutes(),
        s = nowdate.getSeconds(),
        h = checkTime(h),
        m = checkTime(m),
        s = checkTime(s);
      return year + "年" + month + "月" + date + "日" + week[day] + " " + h +":" + m + ":" + s;
    }
  }
}
</script>

<style scoped lang = "scss">
  .nav{
    height: 45px;
    padding: 10px 16px;
    background-color: transparent!important;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }
  .nav-logo-img{
    line-height: inherit;
    vertical-align: top!important;
    width: 32px;
    height: 32px;
  }
  .navbar-brand {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    font-size: 30px;

  }
  .justify-content-end{

    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    font-size: 15px;
    font-family: "Microsoft YaHei";
    color: #eee;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    justify-content: flex-end!important;
  }
  .nav-item{
    list-style: none;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    a{
      padding: 8px 16px;
      vertical-align: center!important;

    }
  }
</style>
